/*VARIABLES */
:root {
    --bg-main: #070b14;
    --bg-card: #0f1726;
    --bg-card-light: #151f32;

    --blue-dark: #172554;
    --stone-blue: #3b82f6;
    --purple: #8b5cf6;
    --cyan: #06b6d4;
    --lantern-green: #22c55e;

    --text-main: #f8fafc;
    --text-muted: #94a3b8;

    --border: rgba(59, 130, 246, 0.22);

    --gradient: linear-gradient(
        135deg,
        var(--stone-blue),
        var(--purple)
    );

    --gradient-full: linear-gradient(
        90deg,
        var(--stone-blue),
        var(--cyan),
        var(--purple)
    );

    --shadow:
        0 10px 35px rgba(0, 0, 0, 0.45);

    --glow-blue:
        0 0 25px rgba(59, 130, 246, 0.20);

    --glow-purple:
        0 0 25px rgba(139, 92, 246, 0.18);

    --glow-green:
        0 0 25px rgba(34, 197, 94, 0.18);

    --transition: 0.3s ease;
}
/*RESET*/
* {
    box-sizing: border-box;
}
html {
    scroll-behavior: smooth;
}
body {
    margin: 0;
    padding: 0;
    min-height: 100vh;

    font-family:
        Tahoma,
        Arial,
        sans-serif;

    background: var(--bg-main);
    color: var(--text-main);

    line-height: 1.8;

    position: relative;
    overflow-x: hidden;
}
a {
    text-decoration: none;
    color: inherit;
}
button,
input,
textarea {
    font-family: inherit;
}
button {
    cursor: pointer;
}
ul,
ol {
    margin: 0;
    padding: 0;
    list-style: none;
}
/*BACKGROUND ANIMATION*/
body::before,
body::after {
    content: "";

    position: fixed;

    width: 500px;
    height: 500px;

    border-radius: 50%;

    filter: blur(120px);

    pointer-events: none;

    z-index: -1;
}
body::before {
    background: rgba(19, 8, 170, 0.342);

    top: -150px;
    left: -150px;

    animation:
        background-blue 12s ease-in-out infinite alternate;
}
body::after {
    background: rgba(184, 92, 246, 0.1);

    bottom: -150px;
    right: -150px;

    animation:
        background-purple 15s ease-in-out infinite alternate;
}
@keyframes background-blue {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(180px, 120px);
    }
}
@keyframes background-purple {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(-180px, -120px);
    }
}
/*NAVBAR*/
.navbar {
    position: fixed;
    top: 15px;
    right: 15px;
    z-index: 1000;
    background:
        rgba(15, 23, 38, 0.92);

    border:
        1px solid rgba(59, 130, 246, 0.18);

    border-radius: 15px;

    backdrop-filter: blur(12px);

    box-shadow:
        0 5px 25px rgba(0, 0, 0, 0.25);

    transition:
        transform 0.3s ease;
}
.navbar.hide-navbar {
    transform: translateY(-120%);
}
.navbar-list {
    display: flex;

    align-items: center;

    gap: 5px;

    padding: 6px;
}
.navbar-link {
    display: block;

    padding: 10px 15px;

    border: 0;

    border-radius: 10px;

    background: transparent;

    color: var(--text-muted);

    font-size: 13px;

    transition:
        color var(--transition),
        background var(--transition),
        transform var(--transition);
}

.navbar-link:hover {
    color: var(--cyan);

    background:
        rgba(59, 130, 246, 0.08);

    transform: translateY(-2px);
}

.navbar-link.active {
    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            rgba(59, 130, 246, 0.25),
            rgba(139, 92, 246, 0.25)
        );
}
/*THEME BUTTON*/
.theme-btn {
    width: 42px;
    height: 42px;

    display: flex;

    align-items: center;
    justify-content: center;

    border:
        1px solid var(--border);

    border-radius: 10px;

    background:
        rgba(59, 130, 246, 0.08);

    cursor: pointer;

    transition:
        background var(--transition),
        transform var(--transition),
        border-color var(--transition);
}

.theme-btn:hover {
    background:
        rgba(59, 130, 246, 0.15);

    border-color:
        rgba(6, 182, 212, 0.35);

    transform: translateY(-2px);
}

.theme-btn img {
    width: 21px;
    height: 21px;

    display: block;

    filter:
        invert(70%)
        sepia(80%)
        saturate(1200%)
        hue-rotate(145deg)
        brightness(95%)
        contrast(95%);
}
/*LANGUAGE BUTTON*/
.language-btn {
    width: 42px;
    height: 42px;

    display: flex;

    align-items: center;
    justify-content: center;

    padding: 0;

    border:
        1px solid var(--border);

    border-radius: 10px;

    background:
        rgba(59, 130, 246, 0.08);

    color: var(--text-main);

    font-family:
        Tahoma,
        Arial,
        sans-serif;

    font-size: 12px;
    font-weight: bold;

    cursor: pointer;

    transition:
        background var(--transition),
        color var(--transition),
        transform var(--transition),
        border-color var(--transition);
}

.language-btn:hover {
    background:
        rgba(59, 130, 246, 0.15);

    color: var(--cyan);

    border-color:
        rgba(6, 182, 212, 0.35);

    transform: translateY(-2px);
}

.language-btn:active {
    transform: translateY(0);
}
/* MAIN LAYOUT*/
main {
    width: 100%;
    max-width: 1200px;

    margin:
        80px auto 60px;

    padding:
        0 20px;

    display: flex;

    align-items: flex-start;

    gap: 25px;
}

.main-content {
    flex: 1;

    min-width: 0;
}
/*SIDEBAR*/
.sidebar {
    flex:
        0 0 280px;

    width: 280px;

    background:
        linear-gradient(
            145deg,
            var(--bg-card),
            #0b1220
        );

    border:
        1px solid var(--border);

    border-radius: 20px;

    box-shadow:
        var(--shadow),
        inset 0 1px 0 rgba(255, 255, 255, 0.02);

    overflow: hidden;

    position: sticky;

    top: 25px;
}

.sidebar-info {
    padding: 25px;

    display: flex;

    align-items: center;

    gap: 15px;

    flex-wrap: wrap;
}

.avatar-box {
    width: 240px;
    height: 240px;
    margin: 0 auto 20px;
    border-radius: 20px;
    overflow: hidden;
}
.avatar-box img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.info-content {
    flex: 1;

    min-width: 120px;
}

.info-content .name {
    margin:
        0 0 5px;

    font-size: 20px;

    color:
        var(--text-main);
}

.info-content .title {
    display: inline-block;

    margin: 0;

    padding: 4px 10px;

    border-radius: 8px;

    font-size: 12px;

    background:
        linear-gradient(
            135deg,
            rgba(59, 130, 246, 0.18),
            rgba(139, 92, 246, 0.18)
        );

    color:
        var(--cyan);

    border:
        1px solid rgba(59, 130, 246, 0.15);

    height: 32px;

    overflow: hidden;

    position: relative;
}

.title-slider {
    display: block;

    animation:
        title-slide 6s linear infinite;
}

.title-slider span {
    display: block;

    height: 33px;

    line-height: 13px;
}

@keyframes title-slide {
    0%,
    35% {
        transform: translateY(0);
    }

    50%,
    85% {
        transform: translateY(-35px);
    }

    100% {
        transform: translateY(-70px);
    }
}
/*SIDEBAR MORE BUTTON*/
.info_more-btn {
    display: none;

    width: 100%;

    padding: 9px 12px;

    border:
        1px solid var(--border);

    border-radius: 10px;

    background:
        rgba(59, 130, 246, 0.08);

    color:
        var(--text-main);
}

.info_more-btn > img {
    width: 18px;
    height: 18px;

    display: block;

    object-fit: contain;
}

.sidebar-info_more {
    padding:
        0 25px 25px;
}
/*SEPARATOR*/
.separator {
    width: 100%;

    height: 1px;

    margin:
        18px 0;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(59, 130, 246, 0.25),
            rgba(139, 92, 246, 0.25),
            transparent
        );
}
/*CONTACT*/
.contacts-list {
    display: flex;

    flex-direction: column;

    gap: 18px;
}

.contact-item {
    display: flex;

    align-items: center;

    gap: 12px;
}

.icon-box {
    width: 42px;
    height: 42px;

    flex-shrink: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 10px;

    background:
        linear-gradient(
            135deg,
            rgba(59, 130, 246, 0.18),
            rgba(139, 92, 246, 0.18)
        );

    color:
        var(--cyan);

    border:
        1px solid rgba(59, 130, 246, 0.2);

    box-shadow:
        var(--glow-blue);
}

.icon-box img {
    width: 22px;
    height: 22px;

    display: block;

    object-fit: contain;

    filter:
        invert(70%)
        sepia(80%)
        saturate(1200%)
        hue-rotate(145deg)
        brightness(95%)
        contrast(95%);
}

.contact-info {
    min-width: 0;
}

.contact-title {
    margin: 0;

    font-size: 11px;

    color:
        var(--text-muted);
}

.contact-link,
.contact-info time,
.contact-info address {
    display: block;

    margin:
        2px 0 0;

    color:
        var(--text-main);

    font-size: 13px;

    font-style: normal;

    word-break: break-word;
}

.contact-link:hover {
    color:
        var(--cyan);
}
/* SOCIAL*/
.social-list {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: 15px;
}

.social-link {
    width: 38px;
    height: 38px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 10px;

    color:
        var(--text-muted);

    border:
        1px solid transparent;

    transition:
        color var(--transition),
        transform var(--transition),
        border-color var(--transition);
}

.social-link:hover {
    color:
        var(--cyan);

    border-color:
        var(--border);

    transform:
        translateY(-3px);
}

.social-link img {
    width: 22px;
    height: 22px;

    display: block;

    object-fit: contain;

    transition:
        transform var(--transition),
        filter var(--transition);

    filter:
        invert(65%)
        sepia(20%)
        saturate(300%)
        hue-rotate(170deg)
        brightness(90%)
        contrast(90%);
}

.social-link:hover img {
    transform:
        translateY(-2px);

    filter:
        invert(75%)
        sepia(90%)
        saturate(1000%)
        hue-rotate(145deg)
        brightness(100%)
        contrast(100%);
}


/* =========================================================
   MAIN ARTICLES
   مهم:
   فقط article های مستقیم داخل main-content
   صفحه محسوب می‌شوند.
========================================================= */

.main-content > article {
    display: none;

    padding: 30px;

    background:
        linear-gradient(
            145deg,
            var(--bg-card),
            #0b1220
        );

    border:
        1px solid var(--border);

    border-radius: 20px;

    box-shadow:
        var(--shadow),
        inset 0 1px 0 rgba(255, 255, 255, 0.02);

    animation:
        pageFade 0.35s ease;
}

.main-content > article.active {
    display: block;
}

@keyframes pageFade {
    from {
        opacity: 0;

        transform:
            translateY(8px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }
}
/*ARTICLE TITLE */
.article-title {
    position: relative;

    display: inline-block;

    margin:
        0 0 25px;

    color:
        var(--text-main);

    font-size: 27px;
}

.article-title::after {
    content: "";

    display: block;

    width: 45px;

    height: 4px;

    margin-top: 7px;

    border-radius: 10px;

    background:
        var(--gradient);
}
/* HOME*/
.HOME-text {
    margin-bottom: 35px;
}

.HOME-text p {
    margin:
        0 0 20px;

    color:
        var(--text-muted);

    font-size: 14px;

    line-height: 2;
}

.HOME-text p:last-child {
    margin-bottom: 0;
}

.HOME-text strong {
    color:
        var(--text-main);
}

.HOME-text > p > span:not(.HOME-highlight) {
    color:
        var(--cyan);
}

.HOME-highlight {
    display: inline-block;

    margin-right: 5px;

    padding:
        2px 10px;

    border-radius: 6px;

    background:
        linear-gradient(
            135deg,
            rgba(59, 130, 246, 0.10),
            rgba(139, 92, 246, 0.10)
        );

    border:
        1px solid rgba(59, 130, 246, 0.12);

    color:
        var(--cyan);
}
/*HOME VALUES*/
.HOME-values {
    margin-top: 50px;

    padding:
        30px 0;

    border-top:
        1px solid var(--border);
}

.HOME-values h3 {
    margin:
        0 0 25px;

    color:
        var(--text-main);

    font-size: 20px;

    text-align: center;
}

.HOME-values-list {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 20px;
}

.HOME-value-item {
    padding:
        25px 20px;

    border-radius: 15px;

    text-align: center;

    background:
        linear-gradient(
            145deg,
            rgba(59, 130, 246, 0.08),
            rgba(139, 92, 246, 0.06)
        );

    border:
        1px solid rgba(59, 130, 246, 0.12);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.02);

    transition:
        transform var(--transition),
        border-color var(--transition),
        box-shadow var(--transition);
}

.HOME-value-item:hover {
    transform:
        translateY(-5px);

    border-color:
        rgba(6, 182, 212, 0.35);

    box-shadow:
        var(--shadow),
        var(--glow-blue);
}

.HOME-value-icon {
    font-size: 35px;

    line-height: 1;
}

.HOME-value-item:hover .HOME-value-icon {
    animation:
        icon-pulse-rotate 0.8s ease-in-out;
}

@keyframes icon-pulse-rotate {
    0% {
        transform:
            scale(1) rotate(0deg);
    }

    50% {
        transform:
            scale(1.15) rotate(8deg);
    }

    100% {
        transform:
            scale(1) rotate(0deg);
    }
}

.HOME-value-item h4 {
    margin:
        12px 0 8px;

    color:
        var(--text-main);

    font-size: 16px;
}

.HOME-value-item p {
    margin: 0;

    color:
        var(--text-muted);

    font-size: 13px;

    line-height: 1.8;
}


/* HOME CTA*/

.HOME-cta {
    margin-top: 40px;

    padding: 30px;

    text-align: center;

    border-radius: 15px;

    background:
        linear-gradient(
            145deg,
            rgba(59, 130, 246, 0.08),
            rgba(139, 92, 246, 0.06)
        );

    border:
        1px solid var(--border);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.02);
}

.HOME-cta p {
    margin: 0;

    color:
        var(--text-main);

    font-size: 15px;
}

.HOME-cta span {
    display: block;

    margin-top: 10px;

    color:
        var(--text-muted);

    font-size: 13px;
}

.HOME-cta a {
    color:
        var(--cyan);

    font-weight: 600;

    transition:
        color var(--transition);
}

.HOME-cta a:hover {
    color:
        var(--purple);
}


/*ABOUT*/

.about-text {
    position: relative;

    display: flex;

    flex-direction: column;

    gap: 18px;

    margin-bottom: 40px;

    color:
        var(--text-muted);

    font-size: 14px;
}

.about-text p {
    position: relative;

    margin: 0;

    padding:
        18px 20px;

    color:
        var(--text-muted);

    font-size: 14px;

    line-height: 2.15;

    border-radius: 10px;

    transition:
        color var(--transition),
        background var(--transition),
        transform var(--transition);
}

.about-text p::before {
    content: "";

    position: absolute;

    right: 0;

    top: 18px;
    bottom: 18px;

    width: 2px;

    border-radius: 10px;

    background:
        linear-gradient(
            to bottom,
            var(--cyan),
            var(--purple)
        );

    opacity: 0.15;

    transition:
        opacity var(--transition);
}

.about-text p:hover {
    color:
        var(--text-main);

    background:
        linear-gradient(
            90deg,
            rgba(59, 130, 246, 0.025),
            rgba(139, 92, 246, 0.06)
        );

    transform:
        translateX(-3px);
}

.about-text p:hover::before {
    opacity: 0.8;
}

.about-text strong {
    color:
        var(--text-main);

    font-weight: 700;

    transition:
        color var(--transition),
        text-shadow var(--transition);
}

.about-text p:hover strong {
    color:
        var(--cyan);

    text-shadow:
        0 0 12px rgba(6, 182, 212, 0.15);
}


/*RESUME / TIMELINE*/

.timeline {
    margin-bottom: 40px;
}

.title-wrapper {
    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 25px;
}

.title-wrapper .icon-box {
    width: 45px;
    height: 45px;
}

.title-wrapper .icon-box img {
    width: 23px;
    height: 23px;
}

.title-wrapper h3 {
    margin: 0;

    font-size: 20px;
}

.timeline-list {
    position: relative;

    padding-right: 30px;
}

.timeline-list::before {
    content: "";

    position: absolute;

    top: 5px;
    bottom: 5px;

    right: 7px;

    width: 2px;

    background:
        rgba(59, 130, 246, 0.2);
}

.timeline-item {
    position: relative;

    padding-bottom: 30px;
}

.timeline-item:last-child {
    padding-bottom: 0;
}

.timeline-item::after {
    content: "";

    position: absolute;

    top: 5px;

    right: -30px;

    width: 12px;
    height: 12px;

    border-radius: 50%;

    background:
        var(--gradient);

    box-shadow:
        0 0 0 4px var(--bg-card),
        0 0 12px rgba(59, 130, 246, 0.4);
}

.timeline-item-title {
    margin:
        0 0 5px;

    color:
        var(--text-main);

    font-size: 16px;
}

.timeline-item span {
    display: block;

    margin-bottom: 7px;

    color:
        var(--cyan);

    font-size: 12px;
}

.timeline-text {
    margin: 0;

    color:
        var(--text-muted);

    font-size: 13px;
}


/*SKILLS*/

.skills-title {
    margin-bottom: 20px;
}

.skills-list {
    padding: 22px;

    border-radius: 15px;

    background:
        linear-gradient(
            145deg,
            rgba(59, 130, 246, 0.07),
            rgba(139, 92, 246, 0.07)
        );

    border:
        1px solid rgba(59, 130, 246, 0.12);
}

.skills-item {
    margin-bottom: 20px;
}

.skills-item:last-child {
    margin-bottom: 0;
}

.title-wrapper .h5,
.title-wrapper h5 {
    margin: 0;

    color:
        var(--text-main);

    font-size: 13px;
}

.title-wrapper data {
    color:
        var(--text-muted);

    font-size: 12px;
}

.skill-progress-bg {
    width: 100%;

    height: 7px;

    margin-top: 8px;

    overflow: hidden;

    border-radius: 10px;

    background:
        #182235;
}

.skill-progress-fill {
    width: 0;

    height: 100%;

    border-radius: inherit;

    background:
        linear-gradient(
            90deg,
            var(--stone-blue),
            var(--cyan),
            var(--purple)
        );

    transition:
        width 1.5s ease;
}


/* PROJECTS*/

.projects-list {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 20px;
}

/* =========================================================
   PROJECT ITEM
   اینجا عمداً article استفاده نشده.
   بنابراین با main-content > article تداخل ندارد.
========================================================= */

.projects-list .project-item {
    display: block;

    overflow: hidden;

    padding: 0;

    border-radius: 16px;

    background:
        linear-gradient(
            145deg,
            rgba(59, 130, 246, 0.08),
            rgba(139, 92, 246, 0.06)
        );

    border:
        1px solid rgba(59, 130, 246, 0.12);

    transition:
        transform var(--transition),
        border-color var(--transition),
        box-shadow var(--transition);
}

.projects-list .project-item:hover {
    transform:
        translateY(-5px);

    border-color:
        rgba(6, 182, 212, 0.35);

    box-shadow:
        var(--shadow),
        var(--glow-blue);
}


/*PROJECT IMAGE*/

.projects-list .project-image {
    width: 100%;

    height: 190px;

    overflow: hidden;

    padding: 0;

    display: block;

    background:
        linear-gradient(
            135deg,
            rgba(23, 37, 84, 0.9),
            rgba(59, 130, 246, 0.35),
            rgba(139, 92, 246, 0.35)
        );
}

.projects-list .project-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform var(--transition);
}

.projects-list .project-item:hover .project-image img {
    transform:
        scale(1.05);
}


/*PROJECT CONTENT*/

.projects-list .project-content {
    padding: 20px;
}

.projects-list .project-title {
    margin:
        0 0 10px;

    color:
        var(--text-main);

    font-size: 18px;

    line-height: 1.6;
}


/*PROJECT META*/

.projects-list .project-meta {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 10px;

    margin-bottom: 12px;
}

.projects-list .project-status,
.projects-list .project-date {
    display: inline-block;

    padding:
        4px 9px;

    border-radius: 7px;

    font-size: 11px;
}

.projects-list .project-status {
    color:
        var(--cyan);

    background:
        rgba(6, 182, 212, 0.08);
}

.projects-list .project-date {
    color:
        var(--text-muted);

    background:
        rgba(255, 255, 255, 0.04);
}


/*PROJECT DESCRIPTION*/

.projects-list .project-description {
    margin:
        0 0 15px;

    color:
        var(--text-muted);

    font-size: 13px;

    line-height: 2;
}


/*PROJECT TECHNOLOGIES*/

.projects-list .project-technologies {
    display: flex;

    flex-wrap: wrap;

    gap: 7px;

    margin-bottom: 18px;
}

.projects-list .project-technologies span {
    display: inline-block;

    padding:
        5px 9px;

    border-radius: 7px;

    color:
        var(--text-muted);

    background:
        rgba(59, 130, 246, 0.07);

    border:
        1px solid rgba(59, 130, 246, 0.10);

    font-size: 11px;
}


/*PROJECT LINKS*/

.projects-list .project-links {
    display: flex;

    flex-wrap: wrap;

    gap: 10px;
}

.projects-list .project-link {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    padding:
        8px 14px;

    border-radius: 8px;

    color:
        var(--cyan);

    background:
        rgba(6, 182, 212, 0.08);

    border:
        1px solid rgba(6, 182, 212, 0.12);

    font-size: 12px;

    transition:
        background var(--transition),
        color var(--transition),
        transform var(--transition);
}

.projects-list .project-link:hover {
    color:
        var(--text-main);

    background:
        rgba(6, 182, 212, 0.15);

    transform:
        translateY(-2px);
}


/*CONTACT FORM*/

.form-title {
    margin-bottom: 20px;
}

.form {
    display: flex;

    flex-direction: column;

    gap: 18px;
}

.input-wrapper {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 18px;
}

.form-input {
    width: 100%;

    padding:
        14px 16px;

    border-radius: 10px;

    border:
        1px solid rgba(59, 130, 246, 0.2);

    outline: none;

    background:
        rgba(15, 23, 38, 0.6);

    color:
        var(--text-main);

    font-size: 13px;

    transition:
        border-color var(--transition),
        box-shadow var(--transition);
}

textarea.form-input {
    min-height: 150px;

    resize: vertical;
}

.form-input:focus {
    border-color:
        var(--cyan);

    box-shadow:
        0 0 0 3px rgba(6, 182, 212, 0.08);
}

.form-input::placeholder {
    color:
        #64748b;
}

.form-btn {
    align-self: flex-start;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 8px;

    min-width: 150px;

    padding:
        12px 22px;

    border: none;

    border-radius: 10px;

    background:
        var(--gradient);

    color:
        #ffffff;

    font-size: 13px;

    transition:
        transform var(--transition),
        box-shadow var(--transition),
        opacity var(--transition);
}

.form-btn img {
    width: 18px;
    height: 18px;

    display: block;
}

.form-btn:not(:disabled):hover {
    transform:
        translateY(-2px);

    box-shadow:
        0 8px 25px rgba(59, 130, 246, 0.25),
        0 0 25px rgba(139, 92, 246, 0.15);
}

.form-btn:disabled {
    opacity: 0.45;

    cursor:
        not-allowed;
}

/*FOOTER*/
.site-footer {
    width: 100%;

    max-width: 1200px;

    margin:
        0 auto;

    padding:
        0 20px 30px;

    text-align: center;

    color:
        var(--text-muted);

    font-size: 12px;
}

.site-footer strong {
    color:
        var(--cyan);
}


/* =========================================================
   LIGHT MODE
========================================================= */

body.light-mode {
    --bg-main: #f1f5f9;
    --bg-card: #ffffff;
    --bg-card-light: #f8fafc;

    --blue-dark: #1e3a8a;
    --stone-blue: #2563eb;
    --purple: #7c3aed;
    --cyan: #0891b2;
    --lantern-green: #16a34a;

    --text-main: #0f172a;
    --text-muted: #64748b;

    --border:
        rgba(37, 99, 235, 0.18);

    --gradient:
        linear-gradient(
            135deg,
            var(--stone-blue),
            var(--purple)
        );

    --gradient-full:
        linear-gradient(
            90deg,
            var(--stone-blue),
            var(--cyan),
            var(--purple)
        );

    --shadow:
        0 10px 35px rgba(15, 23, 42, 0.12);

    --glow-blue:
        0 0 25px rgba(37, 99, 235, 0.12);

    --glow-purple:
        0 0 25px rgba(124, 58, 237, 0.10);

    --glow-green:
        0 0 25px rgba(22, 163, 74, 0.10);
}


/* =========================================================
   LIGHT MODE - BODY
========================================================= */

body.light-mode {
    background:
        radial-gradient(
            circle at top right,
            rgba(37, 99, 235, 0.08),
            transparent 35%
        ),
        radial-gradient(
            circle at bottom left,
            rgba(124, 58, 237, 0.06),
            transparent 35%
        ),
        var(--bg-main);

    color:
        var(--text-main);
}


/* =========================================================
   LIGHT MODE - SIDEBAR
========================================================= */

body.light-mode .sidebar {
    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f8fafc
        );

    border-color:
        var(--border);

    box-shadow:
        0 10px 35px rgba(15, 23, 42, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

body.light-mode .info-content .name {
    color:
        var(--text-main);
}

body.light-mode .info-content .title {
    background:
        linear-gradient(
            135deg,
            rgba(37, 99, 235, 0.10),
            rgba(124, 58, 237, 0.10)
        );

    color:
        var(--cyan);

    border-color:
        rgba(37, 99, 235, 0.15);
}


/* =========================================================
   LIGHT MODE - NAVBAR
========================================================= */

body.light-mode .navbar {
    background:
        rgba(255, 255, 255, 0.92);

    border-color:
        rgba(37, 99, 235, 0.18);

    box-shadow:
        0 5px 25px rgba(15, 23, 42, 0.10);
}

body.light-mode .navbar-link {
    color:
        #64748b;
}

body.light-mode .navbar-link:hover {
    color:
        var(--cyan);

    background:
        rgba(37, 99, 235, 0.07);
}

body.light-mode .navbar-link.active {
    color:
        #0f172a;

    background:
        linear-gradient(
            135deg,
            rgba(37, 99, 235, 0.14),
            rgba(124, 58, 237, 0.12)
        );
}


/* =========================================================
   LIGHT MODE - ARTICLES
========================================================= */

body.light-mode .main-content > article {
    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f8fafc
        );

    border-color:
        var(--border);

    box-shadow:
        0 10px 35px rgba(15, 23, 42, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}


/* =========================================================
   LIGHT MODE - ICON BOX
========================================================= */

body.light-mode .icon-box {
    background:
        linear-gradient(
            135deg,
            rgba(37, 99, 235, 0.10),
            rgba(124, 58, 237, 0.08)
        );

    border-color:
        rgba(37, 99, 235, 0.16);

    box-shadow:
        0 0 20px rgba(37, 99, 235, 0.08);
}


/* =========================================================
   LIGHT MODE - CONTACT
========================================================= */

body.light-mode .contact-link,
body.light-mode .contact-info time,
body.light-mode .contact-info address {
    color:
        var(--text-main);
}

body.light-mode .contact-title {
    color:
        var(--text-muted);
}


/* =========================================================
   LIGHT MODE - SIDEBAR BUTTON
========================================================= */

body.light-mode .info_more-btn {
    background:
        rgba(37, 99, 235, 0.06);

    color:
        var(--text-main);

    border-color:
        var(--border);
}


/* =========================================================
   LIGHT MODE - ABOUT
========================================================= */

body.light-mode .about-text p:hover {
    background:
        linear-gradient(
            90deg,
            rgba(37, 99, 235, 0.025),
            rgba(124, 58, 237, 0.05)
        );
}

body.light-mode .about-text p:hover strong {
    color:
        var(--cyan);
}


/* =========================================================
   LIGHT MODE - HOME
========================================================= */

body.light-mode .HOME-highlight {
    background:
        linear-gradient(
            135deg,
            rgba(37, 99, 235, 0.08),
            rgba(124, 58, 237, 0.07)
        );

    border-color:
        rgba(37, 99, 235, 0.13);

    color:
        var(--cyan);
}

body.light-mode .HOME-value-item {
    background:
        linear-gradient(
            145deg,
            rgba(37, 99, 235, 0.06),
            rgba(124, 58, 237, 0.04)
        );

    border-color:
        rgba(37, 99, 235, 0.13);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

body.light-mode .HOME-value-item:hover {
    border-color:
        rgba(8, 145, 178, 0.35);

    box-shadow:
        0 10px 30px rgba(15, 23, 42, 0.08),
        var(--glow-blue);
}

body.light-mode .HOME-cta {
    background:
        linear-gradient(
            145deg,
            rgba(37, 99, 235, 0.06),
            rgba(124, 58, 237, 0.04)
        );

    border-color:
        var(--border);
}


/* =========================================================
   LIGHT MODE - RESUME
========================================================= */

body.light-mode .timeline-list::before {
    background:
        rgba(37, 99, 235, 0.18);
}

body.light-mode .timeline-item::after {
    box-shadow:
        0 0 0 4px #ffffff,
        0 0 12px rgba(37, 99, 235, 0.25);
}

body.light-mode .timeline-item-title {
    color:
        var(--text-main);
}

body.light-mode .timeline-text {
    color:
        var(--text-muted);
}


/* =========================================================
   LIGHT MODE - SKILLS
========================================================= */

body.light-mode .skills-list {
    background:
        linear-gradient(
            145deg,
            rgba(37, 99, 235, 0.05),
            rgba(124, 58, 237, 0.04)
        );

    border-color:
        rgba(37, 99, 235, 0.13);
}

body.light-mode .title-wrapper .h5,
body.light-mode .title-wrapper h5 {
    color:
        var(--text-main);
}

body.light-mode .title-wrapper data {
    color:
        var(--text-muted);
}

body.light-mode .skill-progress-bg {
    background:
        #e2e8f0;
}


/* =========================================================
   LIGHT MODE - PROJECTS
========================================================= */

body.light-mode .projects-list .project-item {
    background:
        linear-gradient(
            145deg,
            rgba(37, 99, 235, 0.05),
            rgba(124, 58, 237, 0.04)
        );

    border-color:
        rgba(37, 99, 235, 0.12);
}

body.light-mode .projects-list .project-date {
    background:
        rgba(0, 0, 0, 0.04);
}

body.light-mode .projects-list .project-technologies span {
    background:
        rgba(37, 99, 235, 0.05);

    border-color:
        rgba(37, 99, 235, 0.10);
}


/* =========================================================
   LIGHT MODE - FORM
========================================================= */

body.light-mode .form-input {
    background:
        rgba(255, 255, 255, 0.85);

    color:
        var(--text-main);

    border-color:
        rgba(37, 99, 235, 0.18);
}

body.light-mode .form-input:focus {
    border-color:
        var(--cyan);

    box-shadow:
        0 0 0 3px rgba(8, 145, 178, 0.08);
}

body.light-mode .form-input::placeholder {
    color:
        #94a3b8;
}


/* =========================================================
   LIGHT MODE - THEME BUTTON
========================================================= */

body.light-mode .theme-btn {
    background:
        rgba(37, 99, 235, 0.07);

    border-color:
        rgba(37, 99, 235, 0.18);
}

body.light-mode .theme-btn:hover {
    background:
        rgba(37, 99, 235, 0.12);

    border-color:
        rgba(8, 145, 178, 0.30);
}


/* =========================================================
   LIGHT MODE - SEPARATOR
========================================================= */

body.light-mode .separator {
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(37, 99, 235, 0.20),
            rgba(124, 58, 237, 0.18),
            transparent
        );
}


/* =========================================================
   LIGHT MODE - SOCIAL
========================================================= */

body.light-mode .social-link {
    color:
        #64748b;
}

body.light-mode .social-link:hover {
    color:
        var(--cyan);

    border-color:
        var(--border);
}


/* =========================================================
   LIGHT MODE - FOOTER
========================================================= */

body.light-mode .site-footer {
    color:
        var(--text-muted);
}

body.light-mode .site-footer strong {
    color:
        var(--cyan);
}


/* =========================================================
   SCROLLBAR
========================================================= */

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background:
        #0b1220;
}

::-webkit-scrollbar-thumb {
    background:
        linear-gradient(
            var(--stone-blue),
            var(--purple)
        );

    border-radius:
        10px;
}

body.light-mode ::-webkit-scrollbar-track {
    background:
        #e2e8f0;
}


/* =========================================================
   SELECTION
========================================================= */

::selection {
    background:
        var(--purple);

    color:
        #ffffff;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1023px) {

    main {
        display: block;

        margin-top:
            90px;
    }

    .sidebar {
        position: static;

        width: 100%;

        max-width: 700px;

        margin:
            0 auto 25px;
    }

    .main-content {
        width: 100%;

        max-width: 700px;

        margin:
            0 auto;
    }

    .navbar {
        top: auto;

        bottom: 0;

        right: 0;
        left: 0;

        width: 100%;

        border-radius:
            15px 15px 0 0;
    }

    .navbar-list {
        justify-content:
            center;
    }

    .navbar-link {
        flex: 1;

        text-align:
            center;

        padding:
            12px 5px;
    }

    .projects-list {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    main {
        padding:
            0 12px;

        margin-top:
            25px;

        margin-bottom:
            80px;
    }

    .main-content > article {
        padding:
            20px;
    }

    .sidebar-info {
        padding:
            20px;
    }

    .sidebar-info_more {
        padding:
            0 20px 20px;
    }

    .info_more-btn {
        display: flex;

        align-items:
            center;

        justify-content:
            space-between;
    }

    .sidebar-info_more {
        display: none;
    }

    .sidebar.active .sidebar-info_more {
        display: block;
    }

    .service-list,
    .projects-list,
    .input-wrapper {
        grid-template-columns:
            1fr;
    }

    .article-title {
        font-size:
            23px;
    }

    .navbar-list {
        gap:
            2px;

        padding:
            5px;
    }

    .navbar-link {
        font-size:
            11px;

        padding:
            10px 3px;
    }

    .form-btn {
        width:
            100%;
    }

    .projects-list .project-image {
        height:
            200px;
    }
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .navbar-link {
        font-size:
            10px;
    }

    .main-content > article {
        padding:
            16px;
    }

    main {
        padding:
            0 8px;
    }

    .avatar-box {
        width:
            65px;

        height:
            65px;
    }

    .info-content .name {
        font-size:
            17px;
    }
}